<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="lib/css/library.css" />
<script language="JavaScript" src="lib/jquery/jquery-1.4.2.min.js"></script>
<script>
// basic show and hide
$(document).ready(function() {

	//Highlight list items
	$("#library ul.items li").bind('click', function() {
		$("#library .items li.active").removeClass("active");
		$(this).addClass("active");
	});
	
	//show/hide
	$("#library div.arrow").bind('click', function() {
		
		if($(this).hasClass('collapsed')) {
			$(this).removeClass('collapsed').addClass('open').closest('li').find('.items').show();	
		} else {
			$(this).removeClass('open').addClass('collapsed').closest('li').find('.items').hide();	
		}
		
	});
	

});


</script>
</head>

<body id="library">

<ul>
    <li><h2>Library</h2>
        <ul class="items">
            <li class="music"><a href="#">Music</a></li>
            <li class="video"><a href="#">Video</a></li>
            <li class="radio"><a href="#">Radio</a></li>
        </ul>
    </li>
    
    <li><h2>Store</h2>
        <ul class="items">
            <li class="store"><a href="#">Music Store</a></li>
        </ul>
    </li>

    <li><h2><div class='arrow open'></div>Playlists</h2>
        <ul class="items">
        	<li class="system-playlist"><a href="#">Shuffle</a></li>
            <li class="system-playlist"><a href="#">Recently Added</a></li>
            <li class="system-playlist"><a href="#">Most Played</a></li>
            <li class="system-playlist"><a href="#">byo.fm</a></li>
            <li class="user-playlist"><a href="#">User Created 1</a></li>
            <li class="user-playlist"><a href="#">User Created 2</a></li>
            <li class="user-playlist"><a href="#">User Created 3</a></li>
        </ul>
    
    </li>
</ul>

</body>
</html>
